<template>
  <div class="VoiceTag">
    <!-- <el-input placeholder="请输入文本内容" v-model="title">
      <template slot="prepend">内容</template>
    </el-input> -->
    <!-- <el-button type="primary" class="btn" @click="search">搜索</el-button> -->
    <div class="tex">
      <span class="el-icon-warning"></span>
      任何操作后请及时更新表格，否则数据不会更新
    </div>
    <el-card>
      <div class="btn1">
        <el-button class="btn_item1" @click="addRow"
          ><span class="el-icon-plus"></span
        ></el-button>
        <el-button
          type="primary"
          class="btn btn_item2"
          :disabled="bol"
          @click="submit"
          >更新表格</el-button
        >
      </div>
      <el-table :data="list" v-loading="loading" style="width: 100%">
        <el-table-column prop="date" label="文本">
          <template slot-scope="scope">
            <el-input
              class="input1"
              v-model="scope.row.title"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ID" label="ID" width="200px">
          <template slot-scope="scope">
            <el-input
              class="input2"
              v-model="scope.row.type"
              placeholder="请输入ID"
              :disabled="!scope.row.isAdd"
              onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
              @change="
                () => {
                  check(scope.row, scope.$index);
                }
              "
            ></el-input>
            <span
              v-if="scope.row.erorr"
              class="el-icon-warning"
              style="color: red"
            ></span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="info" plain size="small" @click="del(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  globalsetVoiceLabel,
  globalsetEditVoiceLabel,
} from "@/api/operationManagement";
export default {
  data() {
    return {
      loading: true,
      list: [],
      bol: false,
      title: "",
    };
  },
  methods: {
    addRow() {
      this.list.unshift({ isAdd: true, type: "", title: "", erorr: false });
    },
    del(index) {
      this.list.splice(index, 1);
    },
    check(obj, index) {
      let id = obj.type;
      obj.erorr = false;
      this.bol = false;
      this.list.forEach((item, i) => {
        if (item.type == id && index != i) {
          obj.erorr = true;
          this.$message({
            type: "error",
            message: "输入ID和原有ID冲突请重新输入！",
          });
          this.bol = true;
        }
      });
    },
    async getList() {
      this.loading = true;
      const res = await globalsetVoiceLabel({
        title: this.title,
      });
      if (res.code == 0) {
        this.list = res.data;
        this.loading = false;
      }
    },
    submit() {
      let bol = true;
      this.list.forEach((item) => {
        if (item.title == "" || item.type == "") {
          this.$message({
            type: "error",
            message: "请完善表格信息再提交！",
          });
          bol = false;
        }
      });
      if (bol) {
        let arr = [];
        this.list.forEach((item) => {
          arr.push({ type: item.type, title: item.title });
        });
        globalsetEditVoiceLabel({ content: arr }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "更新成功！",
            });
            this.getList();
          }
        });
      }
    },
    search() {},
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.VoiceTag {
  margin: 30px;
  height: 100%;
  .tex {
    height: 30px;
    line-height: 30px;
    color: red;
    margin: 10px 20px;
  }
  .btn1 {
    display: flex;
    justify-content: space-between;
    .btn_item1 {
      text-align: center;
      width: 100px;
      margin-left: 50px;
      .el-icon-plus {
        font-weight: 700;
      }
    }
    .btn_item1 {
      margin-right: 50px;
    }
  }
  .el-input {
    width: 300px;
    margin: 0 20px;
  }
  .input1 {
    width: 90%;
  }
  .input2 {
    width: 70%;
  }
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border: none !important;
}
</style>